<template>
  <Dialog
    v-model="dialogVisible"
    title="列表字段设置"
    class="filter-custom-view"
    width="650"
  >

    <el-radio-group v-model="isShowAll">
      <el-radio :value="true">显示所有</el-radio>
      <el-radio :value="false">
        <span>默认显示</span>
        <span v-if="isShowAll">N</span>
        <el-input-number v-else v-model="showRow" :min="1" :max="3" :precision="0" style="margin: 0 5px;"/>
        <span>行, 可展开显示所有</span>
      </el-radio>
    </el-radio-group>

    <p>共 {{ sourceFilters.length }} 个搜索条件</p>

    <Table
      ref="TableRef"
      :tableCustom="false"
      :columns="columns"
      v-model:data="customFilters"
      :drag="drag"
      row-key="label"
      default-expand-all
    >
      <template #operate="{ row, index }">
        <el-button
          type="primary" link
          :disabled="commonCustom.isDisabledMove(index).up"
          @click="commonCustom.moveUp(index)"
        >
        <Icon icon="ph:arrow-up-bold" /> 上移
        </el-button>

        <el-button
          type="primary" link
          :disabled="commonCustom.isDisabledMove(index).down"
          @click="commonCustom.moveDown(index)"
        >
        <Icon icon="ph:arrow-down-bold" />下移
        </el-button>

        <el-button
          type="primary" link
          :disabled="commonCustom.isDisabledMove(index).top"
          @click="commonCustom.moveTop(index)"
        >
          <Icon icon="icon-park-outline:to-top"/> 置顶
        </el-button>

        <el-button
          type="primary" link
          :disabled="commonCustom.isDisabledMove(index).bottom"
          @click="commonCustom.moveBottom(index)"
        >
          <Icon icon="icon-park-outline:to-bottom"/> 置底
        </el-button>
      </template>
    </Table>
    <template #footer>
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button @click="resetConfig">重置</el-button>
          <el-button type="primary" @click="saveConfig">保存设置</el-button>
      </template>
  </Dialog>
</template>


<script setup lang="ts" name="FilterCustomView">
  import '../style/index.scss'
  import { ref, computed } from "vue";
  import { Dialog, Table, Icon } from "@/components"
  import { VueDraggableProps, TableColumnItem, FilterItem } from "@/components"
  import { ElRadioGroup, ElRadio, ElInputNumber, ElButton } from "element-plus"
  import { useFilterCustom, getFilterCustomConfig, setFilterCustomConfig, FilterCustomType  } from '../utils/useFilterCustom'
  import { cloneDeep } from 'lodash'
  const props = defineProps<{
    // 自定义配置的id 区别每个custom
    customId: string,
    // 字段列表
    sourceFilters: FilterItem[],
    // isShowAll是否展开展示所有搜索条件 默认值
    filterIsShowAll?: boolean
    // showRow展示行数 默认值
    filterShowRow?: number
  }>()
  const emit = defineEmits<{
      (e: 'update:custom-config', customConfig: FilterCustomType)
  }>()

  const TableRef = ref<InstanceType<typeof Table>>()
  const dialogVisible = ref(false)


  // 自定义列
  const customFilters = ref<FilterItem[]>()
  const isShowAll = ref<boolean>()
  const showRow = ref<number>()

  const columns: TableColumnItem[] = [
    {
      type: 'drag',
      width: '80px',
      align: 'center'
    },
    {
      label: '搜索条件',
      prop: 'label',
      minWidth: '120px'
    },
    {
      label: '显示顺序设置',
      slot: 'operate',
      align: 'center',
      minWidth: '200px'
    },
  ]


  /**
   * 初始化
   * @param readConfig 是否读取本地保存的配置
   */
  const initFilters = (readConfig = true) => {
    if (readConfig) {
      const config = getFilterCustomConfig(props.customId, {
        isShowAll: props.filterIsShowAll,
        showRow: props.filterShowRow,
        filters: props.sourceFilters
      })
      isShowAll.value = config.isShowAll
      showRow.value = config.showRow
      customFilters.value = config.filters
    } else {
      isShowAll.value =  props.filterIsShowAll
      showRow.value = props.filterShowRow,
      customFilters.value = cloneDeep( props.sourceFilters)
    }
  }
  initFilters();

  const commonCustom = useFilterCustom(TableRef, customFilters)

  // 开启弹窗
  const openDialog = () => {
    initFilters()
    dialogVisible.value = true
  }




  // 重置配置
  const resetConfig = () => {
    initFilters(false)
  }

  // 保存配置
  const saveConfig = () => {
    const customConfig:FilterCustomType = {
      isShowAll: isShowAll.value,
      showRow: showRow.value,
      filters: customFilters.value
    }
    setFilterCustomConfig(props.customId, customConfig)
    emit('update:custom-config', customConfig)
    dialogVisible.value = false
  }


  // VueDraggableProps 拖拽组件参数
  const drag: VueDraggableProps = {

    onMove: (event, originalEvent) => {
        // console.log('移动')
        // console.log(event)
    },
    onUpdateList: (newList, event) => {

    },
  }


  defineExpose({
    openDialog
  })


</script>

